<template>
  <div class="zy-content">
    <Card style="width:100%">
      <template #title>
        <!--        <Icon type="ios-film-outline"></Icon>-->
        <div class="card-title"> 工单信息区
        </div>
      </template>
      <template #extra>
        <div class="table-btn-view">
          <Button class="table-btn" size="small" type="primary" icon="md-play"
                  @click="trigger('stop')">暂停
          </Button>
          <Button class="table-btn" size="small" type="primary" icon="md-play"
                  @click="trigger('Revoke')">撤单
          </Button>
          <Button class="table-btn" size="small" type="primary" icon="md-play"
                  @click="trigger('report')">开工
          </Button>
          <Button class="table-btn" size="small" type="primary" icon="md-browsers"
                  @click="doWorkJobReport">报工
          </Button>
          <Button class="table-btn" size="small" type="primary" icon="logo-buffer" @click="doFedding">投料
          </Button>
          <Button class="table-btn" size="small" type="primary" icon="md-checkbox">质检</Button>
        </div>
      </template>
      <div class="info-body">
        <div class="info-cil">
          <div class="info-title">工单号</div>
          <div class="info-param">{{ pageParam.workNo || '--' }}</div>
        </div>

        <div class="info-cil">
          <div class="info-title">产品名称</div>
          <div class="info-param">{{ pageParam.productName || '--' }}</div>
        </div>

        <div class="info-cil">
          <div class="info-title">总数</div>
          <div class="info-param">{{ pageParam.orderCount || '--' }}</div>
        </div>


        <div class="info-cil">
          <div class="info-title">已完成数量</div>
          <div class="info-param">{{ pageParam.finishCount || '--' }}</div>
        </div>


      </div>

      <div class="info-body">
        <div class="info-cil">
          <div class="info-title">计划开始时间</div>
          <div class="info-param">{{ pageParam.planBeginTime || '--' }}</div>
        </div>

        <div class="info-cil">
          <div class="info-title">计划结束时间</div>
          <div class="info-param">{{ pageParam.planEndTime || '--' }}</div>
        </div>

        <div class="info-cil">
          <div class="info-title">实际开始时间</div>
          <div class="info-param">{{ pageParam.actualBeginTime || '--' }}</div>
        </div>

        <div class="info-cil">
          <div class="info-title">实际结束时间</div>
          <div class="info-param">{{ pageParam.actualEndTime || '--' }}</div>
        </div>
      </div>
    </Card>


    <Card style="width:100%;margin-top: 25px">
      <template #title>
        <div class="card-title"> 齐套状态区
        </div>
      </template>

      <el-table
          ref="tableOne"
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="date"
            label="日期">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
      </el-table>
    </Card>

    <Card style="width:100%;margin-top: 25px">
      <template #title>
        <div class="card-title"> 投料信息区
        </div>
      </template>

      <el-table
          ref="tableOne"
          :data="tableData1"
          border
          style="width: 100%">
        <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
        />
        <el-table-column
            prop="createTime"
            label="投料时间"
            align="center"
        />
        <el-table-column
            prop="workNo"
            label="投料编码"
            align="center"
        />
        <el-table-column
            prop="materialCount"
            label="投料数量"
            align="center"
        />
      </el-table>
    </Card>

    <Card style="width:100%;margin-top: 25px">
      <template #title>
        <div class="card-title"> 报工状态区
        </div>
      </template>

      <el-table
          ref="tableOne"
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="date"
            label="日期">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
      </el-table>
    </Card>

    <Card style="width:100%;margin-top: 25px">
      <template #title>
        <div class="card-title"> 质量信息区
        </div>
      </template>

      <el-table
          ref="tableOne"
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="date"
            label="日期">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
      </el-table>
    </Card>

    <!--开工弹框 开工弹窗 开工确认-->
    <Modal :mask-closable="false" v-model="startShow" title="开工" class="modal-title-layout">
      <div class="icon blue">
        <i class="iconfont zy-common-rili"></i>
      </div>
      <p class="title">
        <span>是否确认{{showTitle.find(i=>i.value===buttonType).title}}</span>
        <!--        <span>{{ $t('common.sureDelete') }}</span>-->
      </p>
      <div slot="footer">

        <Button type="default" @click="startShow = false">取消</Button>
        <Button type="primary" @click="handleStart">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {basedataEquipmentAllApi} from '@/api/dataBasic/process.js'
import ImportExcelModal from '@/components/importExcel.vue';
import fileDownload from "js-file-download";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from '@/mixins/toggleTableOperation';
import {
  BomApi,
  editApi,
  addApi,
  deleteApi,
  productApi,
  queryByWorkOrder,
  materialAllApi
} from '@/api/dataBasic/materialBom'

export default {
  name: "workPlanDetail",
  components: {ImportExcelModal, search},
  mixins: [toggleTableOperation],
  data() {
    return {
      params: {
        pageSize: 20,
        current: 1
      },
      pageId: null,
      startForm: {},
      startShow: false,
      productBom: [],
      searchData: [
        {
          title: "选择机台",
          key: "id",
          type: 'select',
          dicData: [],
          params: {
            label: "equipmentName",
            value: "id",
          }
        }
      ],
      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      importExcelState: false,
      list: [],
      total: 0,
      deleteShow: false,
      currentItem: {},
      createStatus: false,
      form: {},
      nameList: [],
      searchParams: {},
      materialList: [],
      pageParam: {},
      buttonType:'stop',
      showTitle:[
       { value:'stop',title:"暂停"},
       { value:'Revoke',title:"撤单"},
       { value:'report',title:"开工"},
      ]
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 400;
    }
  },

  mounted() {
    // this.relevance()
    this.pageId = this.$route.query.id ? this.$route.query.id : null;
    this.getDetail()
  },
  methods: {


    trigger(type){
      this.startShow =true
      this.buttonType=type
    },

    // 获取页面数据 刷新页面列表
    getDetail() {
      this.axios.post('/api/workOrder/queryByWoryId', {
        id: this.pageId
      }).then(res => {
        if (res.code !== 200) {
          this.$Message.warning(res.message);
          return false
        }
        this.pageParam = res.data
      }).catch(err => {
        this.$Message.warning('获取页面数据失败');
      })
      // 投料信息
      this.axios.post('/api/throwMaterialRecord/getAll', {
        id: this.pageId
      }).then(res => {
        if (res.code !== 200) {
          this.$Message.warning(res.message);
          return false
        }
        this.tableData1 = res.data
      }).catch(err => {
        this.$Message.warning('获取页面数据失败');
      })
    },
    // 跳转报工
    doWorkJobReport() {
      this.$router.push({
        path: '/workJobReport/index', query: {
          id: this.pageId // 将对象转换为字符串以通过URL传递
        }
      })
    },
    // 跳转投料
    doFedding() {
      this.$router.push({
        path: '/workPlanFeeding/index', query: {
          id: this.pageId // 将对象转换为字符串以通过URL传递
        }
      })
    },
    // 确认开工
    handleStart() {

      if(this.buttonType==='stop'){
        this.axios
          .put("/api/workOrder/update", {
            id: this.$route.query.id,
           status:6,
          })
          .then((res) => {
            if (res.code === 200) {
              this.$Message.success('已暂停');
              this.startShow = false
              // this.getDetail();
            } else {
              this.$Message.warning(res.message);
            }
          });
      }
      if(this.buttonType==='Revoke'){
        this.axios
          .post("/api/workOrder/revocationWork", {
            id: this.$route.query.id
          })
          .then((res) => {
            if (res.code === 200) {
              this.$Message.success('已撤单');
              this.startShow = false
              // this.getDetail();
            } else {
              this.$Message.warning(res.message);
            }
          });
      }
      if(this.buttonType==='report'){
        this.axios
          .post("/api/workOrderStartRecord/save", {
            workOrderId: this.pageId
          })
          .then((res) => {
            if (res.code === 200) {
              this.$Message.success('开工成功');
              this.startShow = false
              // this.getDetail();
            } else {
              this.$Message.warning(res.message);
            }
          });
      }
     
    },
    relevance() {
      basedataEquipmentAllApi().then(res => {
        if (res.code === 200) {
          this.materialList = res.data
          this.searchData[0].dicData = res.data
        }
      })
      materialAllApi().then(res => {
        if (res.code === 200) {
          this.productBom = res.data
          this.searchData[1].dicData = res.data
        }
      })
    },
    getSearch(arg) {
      this.searchParams = arg[0] || {};
      this.getDetail();
    },

    importExcelChange(val) {
      this.importExcelState = false;
      if (val === 'success') {
        this.$Message.success('导入成功!');
        this.changeNum();
      }
    },

    reset() {
      this.params = {pageSize: 20, current: 1};
      this.getDetail();
    },
    changeNum() {
      this.params.current = 1;
      this.params.pageSize = 20;
      this.getDetail();
    },
    handleAdd() {
      this.form = {};
      this.createStatus = true;
    },

    handleImportData() {
      this.importExcelState = true;
    },
    handleAddSubmit() {
      const url = this.form.id ? editApi : addApi;
      url(this.form).then(res => {
        this.$Message.success(res.message);
        this.currentItem = {};
        this.createStatus = false;
        this.getDetail();
      })
          .catch(error => {
            console.error('Error submitting form:', error);
          });

    },
    // 点击详情
    toDetail(row) {
      this.$router.push({
        path: '/dataBasic/process', query,
      })
    },
    // 点击开工
    handleEditRow(row) {
      this.startForm = {...row};
      this.startShow = true;
    },
    // 点击删除
    handleDeleteRow(row) {
      this.currentItem = row;
      this.deleteShow = true;
    },
    changePageNum(val) {
      this.params.current = val;
      this.getDetail();
    },
    changePageSize(val) {
      this.params.pageSize = val;
      this.getDetail();
    }
  }
}
</script>

<style scope>

.card-title {
  font-size: 16px;

}

.info-body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.info-cil {
  width: 25%;
  height: 100px;
  padding: 10px;
  border-radius: 10px;
}

.info-cil:hover {
  background: #f4f6f8;
}

.info-title {
  font-size: 16px;
}

.info-param {
  margin-top: 5px;
  color: #999;
}

.table-btn-view {
  display: flex;
  align-items: center;
  width: 100%;
}


.table-btn {
  margin-right: 15px;
}
</style>
